<template>
  <div class="all">
    <div class="box">
      <!-- 头部 -->
      <row-vet></row-vet>

      <van-field
        v-model="username"
        clearable
        label="用户名"
        right-icon="question-o"
        placeholder="请输入用户名"
        left-icon="contact"
        @click-right-icon="$toast('用户名必须是手机号')"
        @touchstart.stop="show = true"
      />

      <van-field
        v-model="password"
        clearable
        type="password"
        label="密码"
        right-icon="question-o"
        placeholder="请输入密码"
        left-icon="closed-eye"
        @click-right-icon="$toast('密码必须是数字、字母、下划线')"
        @touchstart.stop="show1 = true"
      />
      <!--登录按钮-->
      <div class="touxiang"></div>
      <div @click="onClickButtonchozhi" class="cz">重置</div>
      <div @click="onClickButtonSubmit" class="dl">登录</div>
      <van-number-keyboard
        :show="show"
        extra-key="."
        close-button-text="完成"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
      />
      <van-number-keyboard
        :show="show1"
        theme="custom"
        extra-key="."
        close-button-text="完成"
        @blur="show1 = false"
        @input="onInput1"
        @delete="onDelete1"
      />
    </div>
    <row-vit></row-vit>
  </div>
</template>

<script>
import header from '../util/header'
import myinfo from '../util/navigation'
export default {
  name: 'login',
  data() {
    return {
      errors: [],
      username: '',
      password: '',
      show: false,
      show1: false,
      uname: ''
    }
  },
  created() {
    this.qidong()
  },
  methods: {
    qidong() {
      this.uname = window.localStorage.getItem('uname', this.username)
      if (this.uname !== null) {
        this.$router.push('/')
      }
    },
    onClickButtonchozhi() {
      this.username = ''
      this.password = ''
    },
    // 表单提交
    onClickButtonSubmit: function(e, username, password) {
      if (this.username == '') {
        this.$toast('用户名不能为空')
        return false
      }
      if (this.username.length != 11) {
        this.$toast('请输入正确的用户名')
        return false
      }
      if (this.password == '') {
        this.$toast('密码不能为空')
        return false
      }
      if (this.password.length > 12 || this.password.length < 6) {
        this.$toast('密码长度不能小于6，大于12')
        return false
      }

      window.localStorage.setItem('uname', this.username)
      window.localStorage.setItem('pwd', this.password)
      this.$router.push('/Myinfo')
    },
    onInput(key) {
      this.username = (this.username + key).slice(0, 11)
    },
    onDelete(key) {
      this.username = this.username.slice(0, this.username.length - 1)
    },
    onInput1(key) {
      this.password = (this.password + key).slice(0, 6)
    },
    onDelete1(key) {
      this.password = this.password.slice(0, this.password.length - 1)
    }
  },
  components: {
    'row-vet': header,
    'row-vit': myinfo
  }
}
</script>

<style lang="less" scoped>
.all {
  height: 667px;
  background-image: url('../../img/timg (4).jpg');
  background-size: cover;
  .box {
    padding: 220px 0;
  }
}
.touxiang {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 0 20px #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100px;
  background-image: url('../../img/29254208128045521.png');
  background-position-x: -5px;
  background-size: cover;
}
.van-field {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 20px;
  border-radius: 80px;
  width: 300px;
  border: 1px solid skyblue;
}
.cz {
  font-size: 18px;
  width: 120px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: skyblue;
  border-radius: 80px;
  float: left;
  margin-left: 60px;
}
.dl {
  font-size: 18px;
  width: 120px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color:pink;
  border-radius: 80px;
  float: right;
  margin-right: 60px;
}
</style>
